<template>
  <div>
    <h2>Sync传值：父的值是{{ count }}</h2>
    <Child :count.sync="count"></Child>
    <hr />
    <p>
      注释: <br />
      * .sync也是用来做父子组件的双向绑定的 <br />
      <br />
      * .sync是v-bind的修饰符, `:count.sync="count"` 原理如下 <br />
      + 首先把count通过props传递给子组件 `:count="count"` <br />
      + 给子组件绑定自定义事件 `@update:count="count=$event"` <br />
      +
      组件内部通过props接受传递过来的值,组件内部修改值的时候要触发update:count这个自定义事件
      <br />
      <br />
      * .sync和v-model的区别 <br />
      + v-model 在标签上只能绑定 1 个 , 表单上只能使用 v-model <br />
      + v-model 用的事件名 input, 属性名是 value , .sync 用的事件名
      update:属性名, 属性名自定义 <br />
      +
      如果是和表单类元素相关的使用v-model(子组件内部有input标签),如果没有表单类元素，那么使用.sync
      <br />
    </p>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Props",
  components: {
    Child,
  },
  data() {
    return {
      count: 0,
      pageSize: 3,
      currentPage: 1,
    };
  },
  methods: {},
};
</script>

<style></style>
